<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch深度监听</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="box">
        <input type="text" v-model="mytext">
        <select name="" id="" v-model="obj.year">
            <!-- 当v-model双向绑定一个下拉列表时,首次会根据data中的变量值显示 -->
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
        </select>
        <select name="" id="" v-model="obj.month">
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select name="" id="" v-model="obj.day">
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>
    </div>
</body>
<script>
    let obj = {
        data() {
            return {
                mytext: '',
                obj: {
                    year: 2021,
                    month: 11,
                    day: 31,
                }
            }
        },
        watch: {
            obj: {  //对象名字
                handler(value) {    //注意: handler和deep名称是固定的
                    console.log(value);//监听对象发生改变时要执行的代码,可以是异步请求,dom操作等
                },
                deep: true,//复杂对象进行深度监听
                immediate: true//当页面加载完成后立即执行一次
            }
        },
    }
    let app = Vue.createApp(obj).mount('#box');
</script>

</html>